<template>
	<div class="addProject business-workAdd">
		<div class="addForm zll-form">
			<el-form :model="addForm" :rules="rules" ref="addForm" class="demo-ruleForm">
				<div style="display: flex;justify-content: space-between;line-height: 40px;">
					<p style="font-size: 16px;">{{addForm.deviceCode+' '}} {{addForm.gpName}}</p>
					<p>未出料：<span style="color: #f44336">{{addForm.noOutValue}}</span> kg</p>
				</div>
				<el-form-item class="formList" prop="clValue" label="出料重量：">
					<el-input @input="addForm.clValue=addForm.clValue.replace(/[^0-9\.]/g,'')"  clearable class="input_right dw" v-model="addForm.clValue"></el-input>
					<span class="rs">kg</span>
				</el-form-item>
				<el-form-item class="formList formList" prop="machineName" label="挤塑机号：">
					<div class="list_nav">
						<li v-for="(item,index) in itemList" :key="index"
							@click="changeList(item)"
							:class="{'active': item.itemCode == addForm.machineName}">
							<span>{{item.itemCode}}</span>
						</li>
					</div>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['editData', 'type','items'],
		data() {
			return {
				addForm: {
					noOutValue:0,clValue:'',machineName:'',clUserName:'',peiId:'',deviceCode:'',gpName:''
				},
				rules: {},
				itemList: [],
				count:0
			}
		},
		methods: {

			changeList(val) {
				this.addForm.machineName = val.itemCode
			},
			chuPei(){
				if(!this.addForm.clValue){
					this.$message.warning('请填写出料信息！');
					return;
				}
				if(this.addForm.noOutValue < parseFloat(this.addForm.clValue)){
					this.$message.warning('出料值大于未出料！');
					return;
				}

				this.addLinePeiOut(this.addForm);
			},

			addLinePeiOut(val) {
				let self = this;
				if(self.count != 0){
					return;
				}
				self.count++;
				let outData = {clValue:val.clValue,machineName:val.machineName,clUserName:val.clUserName,peiId:val.peiId};
				self.$http({
					url: "/jinl/linepei/addLinePeiOut",
					method: "post",
					params:outData
				}).then(resp => {
					if (resp.success) {
						self.$eventBus.$emit('updateOutPei');
						return;
					}
					self.$message.error(resp.message);
					self.count = 0;
				});
			},

		},

		watch: {
			items(val){
				this.itemList = val;
			},
			editData(val) {
				for (let key in  this.addForm) {
					this.addForm[key] = val[key] || ''
				}

			},

		},

		mounted() {

		},
	}
</script>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";

	.list_nav {
		display: flex;
		flex-wrap: wrap;

		li {
			width: calc(20% - 10px);
			background: #eee;
			border-radius: 5px;
			text-align: center;
			margin: 5px;
			cursor: pointer;

			&:hover {
				opacity: .7;
			}

			&.active {
				background: #00d1d0;
				color: #fff;
			}
		}
	}
</style>